<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心 / 我的配置 / 指令集</title>
    <!-- easyui js 文件 -->
    <script src="../../frame/jquery-easyui-1.8.3/jquery.min.js"></script>
    <script src="../../frame/jquery-easyui-1.8.3/jquery.easyui.min.js"></script>
    <script src="../../frame/jquery-easyui-1.8.3/locale/easyui-lang-zh_CN.js"></script>

    <!-- 打开窗口 -->
    <script src="../../common/js/openWin.js"></script>

    <!-- easyui 自带的 material-teal 样式  -->
    <link rel="stylesheet" href="../../frame/jquery-easyui-1.8.3/themes/material-teal/easyui.css">

    <!-- mtips -->
    <script src="../../frame/mtips/mtips.js"></script>
    <link rel="stylesheet" href="../../frame/mtips/mtips.css">


    <!-- 自定义 样式文件 -->
    <link rel="stylesheet" href="../../common/css/my.base.css">
    <link rel="stylesheet" href="../../common/css/my.icons.css">

    <link rel="stylesheet" href="pc.css">
</head>

<body>
    <div id="tbCmd" class="flex_toolbar">
        <form>
            <div class="form_row">
                <div class="col_item">
                    <label class="sm_width">关键词:</label><input type="text" class="easyui-textbox sm_width">
                </div>
                <div class="col_item">
                    <a href="javascript:;" class="easyui-linkbutton btn_sm"
                       data-options="iconCls:'icon-settings'">展示配置</a>
                    <a href="javascript:;" class="easyui-linkbutton btn_sm"
                       data-options="iconCls:'icon-search-primary'">查询</a>
                    <a href="javascript:;" class="easyui-linkbutton btn_sm" data-options="iconCls:'icon-add'">新建</a>
                    <a href="javascript:;" class="easyui-linkbutton btn_sm" data-options="iconCls:'icon-edit'">修改</a>
                    <a href="javascript:;" class="easyui-linkbutton btn_sm"
                       data-options="iconCls:'icon-cancel'">删除</a>
                </div>
                <div class="col_item">
                    <a href="javascript:;" class="easyui-linkbutton btn_sm"
                       data-options="iconCls:'icon-copy'">复制</a>
                    <a href="javascript:;" class="easyui-linkbutton btn_sm" data-options="iconCls:'icon-export'">导出</a>
                    <a href="javascript:;" class="easyui-linkbutton btn_sm"
                       data-options="iconCls:'icon-expShare'">经验分享</a>
                </div>
            </div>
        </form>
        <div class="levelFilterDiv">
            <div>
                <div class="col_item">
                    <input type="text" class="easyui-textbox md_width"
                           data-options="iconCls:'icon-search',prompt:'网元分类查询'">
                    <a href="javascript:;" class="easyui-linkbutton btn_sm" data-options="iconCls:'icon-reload'"></a>
                </div>
                <div class="col_item showMoreBtn rotateDown">
                    <a href="javascript:;" class="easyui-linkbutton btn_sm" data-options="iconCls:'icon-up'"></a>
                </div>
            </div>
            <div class="cmdLevelFilterUlDiv">
                <ul class="cmdLevelFilterUl">
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi">AGCF (11)</li>
                    <li class="cmdLevelFilterLi active">AGCF (11)</li>
                </ul>
            </div>
        </div>
    </div>
    <table id="cmd_info_tab"></table>

    <script>
        $(function () {
            // 展示更多
            $('.showMoreBtn').on('click', function (e) {
                e.preventDefault();
                $(this).toggleClass('rotateDown');
                $('.cmdLevelFilterUlDiv').toggleClass('showMore');
                $('#cmd_info_tab').datagrid('resize');
            });

            // datagrid init
            $('#cmd_info_tab').datagrid({
                rownumbers: true,
                singleSelect: true,
                url: '../../common/data/datagrid_data3.json',
                method: 'get',
                fit: true,
                pagination: true,
                toolbar: '#tbCmd',
                columns: [[
                    { field: 'taskname', sortable: true, width: 200, title: '指令名称' },
                    { field: 'taskid', sortable: true, width: 200, title: '指令' },
                    {
                        field: 'opt', width: 260, align: 'center', title: '操作',
                        formatter: function (value) {
                            var btns = '<a href="javascript:;" class="dg_btn bg_warning">日志清洗</a><a href="javascript:;" class="dg_btn bg_normal">输出参数</a>'
                            return value ? btns : btns + '<a href="javascript:;" class="dg_btn bg_normal">输入参数</a>';
                        }
                    },
                    {
                        field: 'opt2', align: 'center', width: 90, title: '审批',
                        formatter: function (value) {
                            if (+value > 0) {
                                var btnTxt, btnCls, hoverTxt;
                                switch (+value) {
                                    case 1:
                                        btnTxt = '审批通过';
                                        btnCls = 'bg_success';
                                        break;
                                    case 2:
                                        btnTxt = '待提交';
                                        btnCls = 'bg_warning';
                                        hoverTxt = 1;
                                        break;
                                    case 3:
                                        btnTxt = '审批不通过';
                                        btnCls = 'bg_danger';
                                        hoverTxt = 1;
                                        break;
                                    case 4:
                                        btnTxt = '审批中';
                                        btnCls = 'bg_normal';
                                        break;
                                    case 5:
                                        btnTxt = '超时关闭';
                                        btnCls = 'bg_warning';
                                        hoverTxt = 1;
                                        break;
                                    default:
                                        break;
                                }
                                return `<a href="javascript:;" class="dg_btn dg_btn_approve ${btnCls}" hovertext=${hoverTxt}>${btnTxt}</a>`;
                            }
                        }
                    },
                    {
                        field: 'status', align: 'center', width: 100, title: '启用',
                        formatter: function () {
                            return '<input name="opt_btn" class="easyui-switchbutton" checked>';
                        },
                    },
                    { field: 'init', sortable: true, width: 200, title: '登陆模式' },
                    { field: 'init', sortable: true, width: 200, title: '指令等待超时(秒)' },
                    { field: 'init', sortable: true, width: 200, title: '更多...' }
                ]],
                onLoadSuccess: function (data) {
                    $('input[name="opt_btn"]').switchbutton({
                        onText: '是',
                        offText: '否',
                        height: 22  
                    });
                    $('.dg_btn_approve').on('mouseenter', function (e) {
                        var btnTxt = e.target.textContent;
                        e.target.textContent = '提交审批';
                        $(this).on('mouseout', function (e) {
                            e.target.textContent = btnTxt;
                        });
                    });
                },
            });
        })
    </script>
</body>

</html>